import React from 'react';
import {
  Row,
  Col,
  Alert,
  Icon,
  Popconfirm,
  Card,
  Button,
  Table,
  Form,
  Input,
  Select,
  Modal,
  Divider,
  Form,
  message,
  InputNumber,
} from 'antd';
import { GridContent, PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';
import { connect } from 'dva';
import axios from '@/components/Engineering/axios';

const FormItem = Form.Item;
const Option = Select.Option;

@connect(({ loading }) => ({
  loading,
}))
class AirOnlineBooking extends React.Component {
  state = {};

  componentDidMount(): void {
    const paramsMatch = this.decodeQuery();
    let value = {};
    value.qyg = `${paramsMatch.qyg}(${paramsMatch.qygen})`;
    value.mdg = `${paramsMatch.mdg}(${paramsMatch.mdgen})`;
    value.weight45 = paramsMatch.p45;
    value.weight100 = paramsMatch.p100;
    value.weight300 = paramsMatch.p300;
    value.weight500 = paramsMatch.p500;
    value.weight1000 = paramsMatch.p1000;
    this.props.form.setFieldsValue(value);
  }

  decodeQuery() {
    let search = decodeURI(document.location.search);
    return search
      .replace(/(^\?)/, '')
      .split('&')
      .reduce(function(result, item) {
        let values = item.split('=');
        result[values[0]] = values[1];
        return result;
      }, {});
  }

  handleSubmit = () => {
    let values = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      if (err) return message.err('填写的参数不完整');
      axios
        .ajax({ url: 'http://test.vmaotong.com:8084/api/air/booking', params: values }, 'post')
        .then(res => {
          if (res && res.resultCode == 'ok') {
            message.success(`订舱成功，稍等工作人员将会与您联系，即将返回`, 1).then(res => {
              setTimeout(() => window.history.go(-1), 1000);
            });
          } else {
            message.error(res.errMessage);
          }
        });
    });
  };

  render():
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | string
    | number
    | {}
    | React.ReactNodeArray
    | React.ReactPortal
    | boolean
    | null
    | undefined {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 4 },
        lg: { span: 6 },
        xl: { span: 6 },
        xxl: { span: 6 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 17 },
        lg: { span: 17 },
        xl: { span: 18 },
        xxl: { span: 18 },
      },
    };


    return (
      <Card>
        <PageHeaderWrapper title="空运在线订舱" style={{marginTop:100}}>
          <Card
            actions={[
              <div style={{ float: 'right', marginRight: 20 }}>
                <Button
                  style={{ marginRight: 20 }}
                  onClick={() => window.history.back()}
                  size="large"
                >
                  取消
                </Button>
                <Button type="primary" size="large" onClick={this.handleSubmit}>
                  提交
                </Button>
              </div>,
            ]}
          >
            <Form>
              <Row>
                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="起运港" {...formItemLayout}>
                    {getFieldDecorator('qyg', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="目的港" {...formItemLayout}>
                    {getFieldDecorator('mdg', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="45价格" {...formItemLayout}>
                    {getFieldDecorator('weight45', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '45价格不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="100价格" {...formItemLayout}>
                    {getFieldDecorator('weight100', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '100价格不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="300价格" {...formItemLayout}>
                    {getFieldDecorator('weight300', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="500价格" {...formItemLayout}>
                    {getFieldDecorator('weight500', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="1000价格" {...formItemLayout}>
                    {getFieldDecorator('weight1000', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '不能为空',
                        },
                      ],
                    })(<Input disabled placeholder="" />)}
                  </FormItem>
                </Col>
              </Row>

              <Divider />

              <Row>
                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="重量" {...formItemLayout}>
                    {getFieldDecorator('weight', {
                      initialValue: '',
                      rules: [
                        {required: true, message: '重量不能为空',},
                        {pattern:/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/,message:'重量填写不规范，只能输入最多2位小数的数字!'}
                      ],
                    })(<InputNumber min={10} placeholder="请输入重量" style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="体积" {...formItemLayout}>
                    {getFieldDecorator('volume', {
                      initialValue: '',
                      rules: [
                        {required: true, message: '体积不能为空',},
                        {pattern:  /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '体积填写不规范，只能输入最多2位小数的数字!',},
                      ],
                    })(<InputNumber min={10} placeholder="请输入体积" style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="件数" {...formItemLayout}>
                    {getFieldDecorator('totalNum', {
                      initialValue: '',
                      rules: [
                        {required: true, message: '件数不能为空',},
                        {pattern:/^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,message:'件数填写不规范，请输入大于0的数字!'}
                      ],
                    })(<InputNumber min={1} placeholder="请输入件数" style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>

                <Col xs={24} lg={12} xl={8}  >
                  <FormItem label="时效性要求" {...formItemLayout}>
                    {getFieldDecorator('timelinessMeo', {
                      initialValue: '',
                      rules: [
                        {
                          required: true,
                          message: '时效性要求不能为空',
                        },
                      ],
                    })(<Input placeholder="请输入时效性要求" />)}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Card>
        </PageHeaderWrapper>
      </Card>
    );
  }
}

export default Form.create()(AirOnlineBooking);
